
<template>
	 <view class="category-wrap">
		<!-- <view style="height: 20vh;background-color: aliceblue;">
			展示区
		</view> -->
		<view class="order_product">
		  <!--类别列表-->
		  <view class="category-content">
			<view class="cotegory-type cotegory-type-3">
			  <view class="category-tab">
				<scroll-view
				  scroll-y="true"
				  class="scroll-Y"
				  :scroll-into-view="tocate"
				  scroll-with-animation="true"
				>
				  <view
					:class="index == select_index ? 'item active' : 'item'"
					v-for="(item, index) in list"
					:key="index"
					@click="selectCategory(item.id, index)"
					:id="'pro_' + item.id"
				  >
					<text style="white-space: pre;">{{ item.flName.replace(' ','\n')}}</text>
					<!-- <view class="cate_num_all" v-if="item.cate_num_all">
					  <text>{{ item.cate_num_all }}</text>
					</view> -->
				  </view>
				</scroll-view>
			  </view>
			  <view class="category-content pr">
				<scroll-view
				  scroll-y="true"
				  class="scroll-Y scroll-3"
				  :scroll-into-view="toview"
				  scroll-with-animation="true"
				  @scroll="cateScroll"
				>
				  <block v-for="(item, index) in list" :key="index">
					<view
					  v-if="item.name == '精选'+ ' ' + '套餐'"
					  :id="'pro_' + item.id">
					  <view
						v-for="(item1, i) in item.children"
						:key="i"
						class="list_pro_one"
						@click="getdetail(item1.id, item1)"
					  >
					  {{item.children}}
						<image
						  class="pro_img_info"
						  :src="imgUrl+item1.spImage"
						  mode="scaleToFill"
						>
						</image>
						<view class="detail">
						  <view class="type-name">{{ item1.spName }}</view>
						  <view class="selling_point">{{
							item1.selling_point
						  }}</view>
						  <view class="price">￥{{ item1.price }}</view>
						  <view
							v-if="item1.spec_type == 20"
							class="guige"
							@click.stop="getdetail(item1.product_id, item1)"
						  >
							{{ item1.product_stock ? "选规格" : "库存不足" }}
						  </view>
						  <view
							v-else
							class="guige_jj icon iconfont icon-jia"
							@click.stop="addCart(item1)"
						  ></view>
						</view>
					  </view>
					</view>
					<view v-else class="item aaaaa" :id="'pro_' + item.category_id">
					  <view
						v-for="(item1, i) in item.children"
						:key="i"
						class="list_pro"
						:id="item1.id"
						@click="getdetail(item1.id, item1)"
					  > 
						<image
						  class="pro_img_info"
						  :src="imgUrl+item1.spImage"
						  mode="aspectFill"
						>
						</image>
						<view class="detail">
						  <text class="type-name">{{ item1.spName }}</text>
						  <text class="selling_point">{{
							item1.selling_point
						  }}</text>
						  <text class="price">￥{{ item1.price }}</text>
						  <block>
							<text
							  v-if="item1.spec_type == 20"
							  class="guige"
							  @click.stop="getdetail(item1.product_id, item1)"
							  >{{
								item1.product_stock ? "选规格" : "库存不足"
							  }}</text
							>
							<text
							  v-else
							  class="guige_j icon iconfont icon-jia"
							  @click.stop="addCart(item1)"
							></text>
						  </block>
						</view>
					  </view>
					</view>
				  </block>
				</scroll-view>
			  </view>
			</view>
		  </view>
		</view>
	</view>
</template>

<script>
	import { spList } from '@/api/shop.js'
	import config from '@/config'
	export default {
		data() {
			return {
				imgUrl:config.baseUrl,
				toview: "",
				select_index: 0,
				pId:"",
				list:[],
			}
		},
		onLoad: function(options) {
			this.pId = options.id
			this.getList()
		},
		methods:{
			// 查询该品牌存在的分类和商品
			getList(){
				let data = {
					  id :this.pId
				}
				console.log('1111',data)
				spList(data).then((res) => {
					if(res.code==200){
						// this.list = res.data
						let data = res.data
						// 遍历成children结构
						let newObj = {}
							data.forEach((item, index) => {
							  // 解构出每一个对象里面flName字段的值
							  let { flName } = item
							  let { flId } = item
							  // 如果在这个新对象里面没有找到，则新增一个对象
							  if (!newObj[flName]) {
								// 重构对象
								newObj[flName] = {
								  flName,
								  flId,
								  children: [],
								}
							  }
							  // 如果在对象里面找到有相同的 flName 字段的值，则Push进入children里面
							  newObj[flName].children.push(item)
							})
							this.list = Object.values(newObj)
					}
				  })
			},
			
			// 将原始数据转换为树形结构
			buildCategoryTree(items) {
			    let tree = items.filter(item => item.flId === 5); // 筛选出所有顶级分类
			 console.log('treetreetree',tree)
			    // 给所有分类添加 children 属性，并默认为空数组
			    tree.forEach(item => {
			        item.children = [];
			    });
			 
			    // 遍历所有分类
			    items.forEach(item => {
			        // 找到当前分类的父分类，并将当前分类添加到父分类的 children 数组中
			        const parent = tree.find(parentItem => parentItem.id === item.parentId);
			        if (parent) {
			            parent.children.push(item);
			        }
			    });
				
			    return tree;
			},
			
			
			/*选择分类*/
			selectCategory(e, index) {
				this.toview = "pro_" + e;
				this.select_index = index;
			},
			cateScroll() {
			  const query = uni.createSelectorQuery().in(this);
			  query.selectAll(".aaaaa")
			    .boundingClientRect((data) => {
			      for (var cate = 0; cate < data.length; cate++) {
			        if (data[cate].top < 200 && data[cate].top > 0) {
			          this.toview = data[cate].id;
			          this.select_index = cate;
			        }
			      }
			    })
			    .exec();
			},
		}
	}
</script>

<style lang="less">
	/**/
	.list_pro_one {
	  position: relative;
	  margin: 10px 20px 10px 0px;
	  image {
	    width: 100%;
	    height: 166px;
	    border-radius: 10px;
	  }
	
	  .detail {
	    width: 100%;
	    position: absolute;
	    top: 0;
	    padding: 18px 12px;
	    box-sizing: border-box;
	    color: #343434;
	    height: 100%;
	  }
	
	  .detail .type-name {
	    font-size: 18px;
	    //color: #343434;
	  }
	
	  .detail .selling_point {
	    font-size: 13px;
	    margin-top: 6px;
	  }
	
	  .detail .price {
	    font-size: 23px;
	    margin-top: 10px;
	    font-weight: bold;
	  }
	
	  .guige_jj {
	    background: #278D44;
	    color: #fff !important;
	    border-radius: 15px;
	    font-size: 10px;
	    padding: 5px;
	    position: absolute;
	    bottom: 20px;
	    right: 10px;
	  }
	}
	
	.guige_j {
	  background: #278D44;
	  color: #fff !important;
	  border-radius: 15px;
	  font-size: 10px;
	  padding: 5px;
	  float: right;
	}
	
	.cate_num_all {
	  display: inline-block;
	  background: #499E39;
	  border-radius: 50%;
	  position: absolute;
	  right: 8px;
	  width: 16px;
	  color: #fff;
	  top: 10px;
	  height: 16px;
	  line-height: 16px;
	  font-size: 10px;
	}
	
	.header_cate {
	  display: flex;
	  padding-top: 6vh;
	  background: #177B3D;
	  align-items: center;
	  padding-bottom: 5px;
	
	  text {
	    color: #fff;
	    font-size: 17px;
	    margin: 0 17px;
	  }
	
	  input {
	    background: #f7f7f7;
	    padding: 5px;
	    text-align: center;
	    border-radius: 16px;
	    font-size: 14px;
	    color: #969696;
	    width: 190px;
	  }
	}
	
	.category-wrap {
	  width: 100%;
	  background-color: #fff;
	}
	
	.shop {
	  font-size: 15px;
	  margin-left: 7px;
	}
	
	.order_product{
		height: 100%;
		border: 1px solid red;
	}

	.category-content {
	  overflow: hidden;
	  height: 100%;
	}
	
	.cotegory-type {
	  width: 100%;
	  height: 100%;
	}
	
	.category-tab {
	  width: 87px;
	  background: #f5f5f5;
	  overflow-y: scroll;
	  padding-bottom: 22px;
	
	  .seach {
	    padding: 20rpx 0;
	    font-size: 14px;
	    text-align: center;
	    color: #b6c0cf;
	  }
	
	  .seach .icon {
	    font-size: 25px !important;
	    display: block;
	  }
	
	  .item {
	    position: relative;
	    padding: 20px;
	    font-size: 16px;
	    text-align: center;
	    color: #6f6f6f;
	    display: inline-block;
	    text-align: center;
	    width: 100%;
	    box-sizing: border-box;
	  }
	
	  .item image {
	    width: 40px;
	    height: 40px;
	    margin: auto;
	    display: block;
	  }
	
	  .item.active {
	    position: relative;
	    background: #c9ebc9;
	    color: #000;
	    font-weight: bold;
	  }
	}
	
	.cotegory-type-3 .category-content {
	  flex: 1;
	  background-color: #e99494;
	}
	
	.scroll-3 {
	  height: 73vh;
	  margin: 0 10px;
	  padding-bottom: 15px;
	}
	
	.cotegory-type-3 .list {
	  padding: 0 25rpx;
	}
	
	.cotegory-type-3 {
	  display: flex;
	}
	
	.cotegory-type-3 .scroll-3 .item {
	  font-size: 24rpx;
	
	  .detail {
	    vertical-align: top;
	    width: 51%;
	    position: relative;
	    padding-top: 10px;
	  }
	
	  .cate_name {
	    width: 94%;
	    height: 91px;
	    border-radius: 10px;
	  }
	
	  .list_pro {
	    width: 94%;
	    background: #fff;
	    border-radius: 10px;
	    margin: 10px 0;
	    padding: 10px;
	    box-sizing: border-box;
	    display: flex;
	    justify-content: space-between;
	  }
	
	  .type-name {
	    font-size: 16px;
	    display: block;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	    overflow: hidden;
	    color: #343434;
	    font-weight: bold;
	  }
	
	  .selling_point {
	    display: block;
	    color: #999;
	    height: 100rpx;
	    overflow: hidden;
	    padding: 4px 0;
	    font-size: 12px;
	    line-height: 20px;
	  }
	
	  .price {
	    font-size: 18px;
	    color: #343434;
	    font-weight: 600;
	  }
	
	  .guige {
	    float: right;
	    padding: 0px 10px;
	    background-color: #278D44;
	    border-radius: 11px;
	    color: #fff;
	    z-index: 999;
	    font-size: 12px;
	    height: 22px;
	    line-height: 22px;
	  }
	}
	.cotegory-type-3 .scroll-3 .item .pro_img_info {
	  width: 45%;
	  height: 220rpx;
	  border-radius: 10px;
	}
	</style>

